<template>
  <div class="checkweb">
    <p>每月总盈利</p>
    <div style="width: 0; height: 0" id="profit"></div>
  </div>
</template>
  
  <script>
export default {
  mounted() {
    console.log(window.innerHeight);
    document.getElementById("profit").style.width =
      window.innerWidth / 2 - 150 + "px"; //初始化echarts图表宽度
    document.getElementById("profit").style.height =
      window.innerHeight / 2 - 200 + "px"; //初始化echarts图表高度
    let myChart = this.$echarts.init(document.getElementById("profit"));
    window.addEventListener("resize", () => {
      document.getElementById("profit").style.width =
        window.innerWidth / 2 - 150 + "px";
      myChart.resize();
      document.getElementById("profit").style.height =
        window.innerHeight / 2 - 200 + "px";
      myChart.resize();
    });
    this.lineCheck();
  },
  methods: {
    lineCheck() {
    let myChart = this.$echarts.init(document.getElementById("profit"));
      const colors = ["#008080", "#A52A2A"];
      myChart.setOption ({
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
            label: {
              formatter: function (params) {
                return Math.floor(params.value)+((params.value%1).toString().substr(2,1)==""?"":"."+(params.value%1).toString().substr(2,1)) + "元";
              },
            },
          },
        },
        legend: {},
        grid: {
          top: -10,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "收入  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "") +
                    "元"
                  );
                },
              },
            },
            // prettier-ignore
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "支出  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "") +
                    "元"
                  );
                },
              },
            },
            // prettier-ignore
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} 元",
            },
          },
        ],
        series: [
          {
            name: "支出",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            areaStyle: {
              normal: {
                color: "#008080", //改变区域颜色
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [100, 30, 40, 18.7, 30, 51, 60, 52.2, 48.7, 18.8, 30, 23],
          },
          {
            name: "收入",
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: "#A52A2A", //改变区域颜色
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [
              60, 89, 68.1, 108.7, 100, 89.2, 131.6, 99.6, 105.4, 118.4, 103.3,
              95,
            ],
          },
        ],
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.checkweb {
  font-weight: bold;
  font-family: 黑体;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
</style>